<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
      <el-form-item label="创建日期：">
        <el-date-picker
          v-model="dateArray"
          @change="dateChange"
          style="width: 240px"
          :picker-options="pickerOptions0"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="请选择：" prop="xiaoquValue">
        <!-- <el-select v-model="queryParams.xiaoquValue" placeholder="请选择小区" clearable>
          <el-option v-for="dict in xiaoquData" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select> -->
        <!-- <el-cascader v-model="value" :options="options" @change="handleChange"></el-cascader> -->
        <el-cascader
          v-model="selectData"
          collapse-tags
          @change="cascaderChange"
          :options="cascaderOptions"
          :props="cascaderProps"
          clearable
        ></el-cascader>
      </el-form-item>
      <!-- <el-form-item label="选择：" prop="xiaoquValue">
        <el-select v-model="queryParams.value" placeholder="请选择" clearable>
          <el-option v-for="dict in selectData" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item>
        <el-button type="primary" icon="el-icon-plus">添加</el-button>
      </el-form-item> -->
      <el-form-item label="间隔：" prop="jiange">
        <el-select v-model="queryParams.timePoint" placeholder="请选择">
          <el-option key="5" label="间隔5" :value="5"></el-option>
          <el-option key="10" label="间隔10" :value="10"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="getEchartsData" type="primary" icon="el-icon-search"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
    <div class="info_box">
      <div class="top">
        <div class="biao1">
          <div class="title">
            <div class="tag"></div>
            故障分析
          </div>
          <div id="guzhang" style="height: 100%; width: 100%"></div>
        </div>
        <div class="biao2">
          <div style="height: 30px">
            <div class="title">
              <div class="tag"></div>
              数据总览
            </div>
          </div>
          <div class="totalDataTable" v-show="dataOverviewData">
            <TotalDataTable :dataObj="dataOverviewData"></TotalDataTable>
          </div>
          <!-- <div id="shuju" style="height: 100%;width: 100%;"></div> -->
        </div>
      </div>
      <div class="bottom">
        <div class="biao5">
          <div class="title">
            <div class="tag"></div>
            室外温度（℃）
          </div>
          <div id="shiwai" style="height: 100%; width: 100%"></div>
        </div>
        <div class="biao5">
          <div class="title">
            <div class="tag"></div>
            供水温度（℃）
          </div>
          <div id="gongshui" style="height: 100%; width: 100%"></div>
        </div>
        <div class="biao5">
          <div class="title">
            <div class="tag"></div>
            瞬时流量（m3/h）
          </div>
          <div id="liuliang" style="height: 100%; width: 100%"></div>
        </div>
        <div class="biao4">
          <div class="title">
            <div class="tag"></div>
            室内温度（℃）
          </div>
          <div id="wendu" style="height: 280px; width: 100%"></div>
        </div>
        <div class="biao5">
          <div class="title">
            <div class="tag"></div>
            回水温度（℃）
          </div>
          <div id="huishui" style="height: 100%; width: 100%"></div>
        </div>
        <div class="biao3">
          <div class="title">
            <div class="tag"></div>
            瞬时热量（GJ/h）
          </div>
          <div id="reliang" style="height: 100%; width: 100%"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import TotalDataTable from "@/components/TotalDataTable";
// import { dataanalyze } from "@/api/mock";
// import data5 from '@/utils/data5.json'
import {
  faultAnalysis,
  dataOverview,
  heatAnalysis, //瞬时热量
  velocityFlowAnalysis, //瞬时流量
  temperatureAnalysis, //室内温度
  waterSupplyTemperatureAnalysis, //供水温度
  returnWaterTemperatureAnalysis, //回水温度
  outTemperatureAnalysis, //室外温度
} from "@/api/dataanalyze/dataanalyze";
import {
  listCPlotSelect,
  listBuildSelect,
  listBuildUnitSelect,
  listHouseholdSelect,
} from "@/api/system/utils";
let colors = [
  "#91cc75",
  "#fac858",
  "#ee6666",
  "#73c0de",
  "#3ba272",
  "#fc8452",
  "#9a60b4",
  "#ea7ccc",
];

export default {
  components: {
    TotalDataTable,
  },
  data() {
    return {
      lineColor:{},
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;
        },
      },
      queryParams: {
        ids: [],
        startTime: "",
        endTime: "",
        type: null,
        timePoint: 5,
      },
      dateArray: [],
      cascaderProps: {
        multiple: true,
        checkStrictly: true,
        lazy: true,
        lazyLoad: this.lazyLoadFun,
      },
      // xiaoquData: [],
      selectData: [],
      option1: {
        color: colors,
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
          textStyle: {
            //图例文字的样式
            color: "#fff",
            fontSize: 16,
          },
        },
        grid: {
          bottom: "5px",
          top: "10%",
          containLabel: true,
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["35%", "65%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "楼栋1" },
              { value: 735, name: "楼栋2" },
              { value: 580, name: "楼栋3" },
              { value: 484, name: "楼栋4" },
              { value: 484, name: "楼栋5" },
            ],
          },
        ],
      },
      option2: {
        //图例颜色
        color: ["#efff00", "#00ff37", "#E24CFF"],
        //图例文字
        legend: {
          top: "10%",
          data: ["热量", "温度", "流量"],

          textStyle: {
            //图例文字的样式
            color: "#fff",
            fontSize: 12,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        grid: {
          top: "20%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [
              "4-6",
              "6-8",
              "8-10",
              "10-12",
              "12-14",
              "14-16",
              "16-18",
              "18-20",
              "20-22",
              "22-24",
            ],
            //x轴文字
            axisLabel: {
              color: "#fff",
            },
            //x轴线
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            max: 50,
            //y轴文字
            axisLabel: {
              color: "#000",
            },
            //y轴线
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              //y轴文字的配置
              textStyle: {
                color: "#fff",
                margin: 15,
              },
            },
            // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
            //y轴区域内【x轴平行线】
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "#fff",
              },
            },
          },
        ],
        series: [
          {
            name: "热量",
            type: "line",
            //圆滑的曲线
            smooth: true,
            //被包围的区域
            areaStyle: {
              color: "#00B4FF",
              opacity: 0.2,
            },
            //区域线
            // lineStyle: {
            //   color: "#00B4FF",
            //   width: 1.5,
            //   normal:{
            //     color:'#fff'
            //   }
            // },
            emphasis: {
              focus: "series",
            },
            data: [3, 10, 24, 28, 15, 35, 16, 33, 41, 9],
          },
          {
            name: "温度",
            type: "line",
            //圆滑的曲线
            smooth: true,
            //被包围的区域
            areaStyle: {
              color: "#ECB520",
              opacity: 0.2,
            },
            //区域线
            // lineStyle: {
            //   color: "#ECB520",
            //   width: 1.5
            // },
            emphasis: {
              focus: "series",
            },
            data: [24, 32, 33, 3, 38, 4, 8, 18, 8, 35],
          },
          {
            name: "流量",
            type: "line",
            //圆滑的曲线
            smooth: true,
            //被包围的区域
            areaStyle: {
              color: "#E24CFF",
              opacity: 0.2,
            },
            //区域线
            // lineStyle: {
            //   color: "#E24CFF",
            //   width: 1.5
            // },
            emphasis: {
              focus: "series",
            },
            data: [22, 23, 25, 31, 28, 34, 18, 38, 18, 25],
          },
        ],
      },
      //室内温度
      option3: {
        color: colors,
        grid: {
          // top:"3%"
          // left: "3%",
          // right: "4%",
          // bottom: "3%",
          // containLabel: true,
        },
        xAxis: [
          // {
          //   type: "category",
          //   data: ["一号楼", "二号楼", "三号楼", "四号楼", "五号楼"],
          //   axisLabel: {
          //     color: "#fff",
          //     // interval: 0,
          //     rotate: -30,
          //     fontSize: 7,
          //   },
          //   //y轴线
          //   axisLine: {
          //     lineStyle: {
          //       color: "#fff",
          //     },
          //   },
          //   axisTick: {
          //     alignWithLabel: true,
          //   },
          // },
        ],
        yAxis: [
          {
            type: "value",
            // min: 0,
            // max: 50,
            scale: true,
            axisLabel: {
              color: "#fff",
            },
            // //y轴线
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
          },
        ],
        tooltip: {
          trigger: "axis",
          // axisPointer: {
          //   type: "cross",
          // },
          // formatter: (param) => {
          //   console.log("ssss", param[0]);
          //   let {
          //     name,
          //     plotName,
          //     buildName,
          //     unitName,
          //     houseNumber,
          //     temperature,
          //     reportTime,
          //   } = param[0].data.res;
          //   // if (!buildName) {
          //   //   buildName = "";
          //   // }
          //   // if (!unitName) {
          //   //   unitName = "";
          //   // }
          //   // if (!houseNumber) {
          //   //   houseNumber = "";
          //   // }
          //   return `${name} <br>${reportTime} <br> ${temperature}`;
          // },
          // axisPointer: {
          //   type: 'cross',
          //   label: {
          //     backgroundColor: '#6a7985'
          //   }
          // }
        },
        series: [
          // {
          //   data: [120, 200, 150, 80, 70],
          //   type: "line",
          //   barWidth: 15,
          //   itemStyle: {
          //     color: "#FFB125",
          //   },
          // },
        ],
      },
      //瞬时流量
      option4: {
        color: colors,
        xAxis: {
          type: "category",
          data: ["一号楼", "二号楼", "三号楼", "四号楼", "五号楼"],
          axisLabel: {
            color: "#fff",
          },
          //y轴线
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#fff",
          },
          //y轴线
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
        },
        tooltip: {
          trigger: "axis",
          // axisPointer: {
          //   type: 'cross',
          //   label: {
          //     backgroundColor: '#6a7985'
          //   }
          // }
        },
        series: [
          {
            data: [120, 200, 150, 80, 70],
            type: "bar",
            barWidth: 15,
            itemStyle: {
              color: "#FF6725",
            },
          },
        ],
      },
      //瞬时热量
      option5: {
        color: colors,
        xAxis: [
          //   {
          //   type: "category",
          //   data: ["一号楼", "二号楼", "三号楼", "四号楼", "五号楼"],
          //   axisLabel: {
          //     color: "#fff",
          //   },
          //   //y轴线
          //   axisLine: {
          //     lineStyle: {
          //       color: "#fff",
          //     },
          //   },
          // },
        ],
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#fff",
          },
          //y轴线
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
        },
        tooltip: {
          trigger: "axis",

          // axisPointer: {
          //   type: 'cross',
          //   label: {
          //     backgroundColor: '#6a7985'
          //   }
          // }
        },
        series: [
          // {
          //   data: [120, 200, 150, 80, 70],
          //   type: "bar",
          //   barWidth: 15,
          //   itemStyle: {
          //     color: "#FF7CCA",
          //   },
          // },
        ],
      },
      //供水温度
      option6: {
        color: colors,
        xAxis: [],
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#fff",
          },
          //y轴线
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
        },
        tooltip: {
          trigger: "axis",
        },
        series: [],
      },
      //回水温度
      option7: {
        color: colors,
        xAxis: [],
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#fff",
          },
          //y轴线
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
        },
        tooltip: {
          trigger: "axis",
        },
        series: [],
      },
      //室外温度
      option8: {
        color: colors,
        xAxis: [],
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#fff",
          },
          //y轴线
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
        },
        tooltip: {
          trigger: "axis",
        },
        series: [],
      },
      cascaderOptions: [],
      dataOverviewData: null, //数据总览表格数据
    };
  },
  created() {
    listCPlotSelect({}).then((res) => {
      this.cascaderOptions = res.rows;
    });
    // this.init()
  },
  methods: {
    echartsFn(dom, option) {
      const chartDom = document.querySelector(dom);
      const myChart = echarts.init(chartDom);
      // myChart.clear();
      myChart.setOption(option,true);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    //获取楼栋选项
    getEchartsData() {
      this.clearOptions();
      if (this.queryParams.ids.length <= 0 || this.selectData.length <= 0) {
        this.$message({
          showClose: true,
          message: "请至少选择一项",
          type: "warning",
        });
        return;
      }
      // 故障分析
      faultAnalysis(this.queryParams).then((res) => {
        let data = res.data.map((item) => {
          return { name: item.name, value: item.num };
        });
        // this.lineColor = res.data.map((item, index) => {
        //   return { name: item.name, color: this.getLineColor(index) };
        // });
        res.data.forEach((item,index)=>{
          this.lineColor[item.name]= this.getLineColor(index) 
        })
        console.log("每条线的颜色", this.lineColor)
        this.option1.series[0].data = data;
        this.$nextTick(() => {
          this.echartsFn("#guzhang", this.option1);
        });
      });
      // 数据总览
      dataOverview(this.queryParams).then(({ data }) => {
        this.dataOverviewData = data;
      });
      // 热量分析（瞬时热量）
      heatAnalysis(this.queryParams).then((res) => {
        let srcData = res.data; //源数据，对象
        let objKey = this.findLongestListKey(srcData); //拿到列表最长的key
        console.log("供水温度最长的key", objKey);
        for (const key in srcData) {
          if (key === objKey) {
            let timeList = srcData[key].map((item) => {
              return item.createTime;
            });
            let dotList = srcData[key].map((item) => {
              return {
                res: item,
                value: `${item.value}`,
              };
            });
            this.option5.series.unshift({
              name: key,
              type: "line",
              data: dotList,
              color:this.lineColor[key],
              xAxisIndex: 0,
            });
            this.option5.xAxis.unshift({
              type: "category",
              data: timeList,
              boundaryGap: false,

              axisLabel: {
                color: "#fff",
                rotate: -30,
                fontSize: 10,
              },
              position: "bottom",
              //y轴线
              axisLine: {
                lineStyle: {
                  color: "#fff",
                },
              },
              axisTick: {
                alignWithLabel: true,
              },
            });
          } else {
            let timeList = srcData[key].map((item) => {
              return item.createTime;
            });
            let dotList = srcData[key].map((item) => {
              return {
                res: item,
                value: `${item.value}`,
              };
            });
            this.option5.series.push({
              name: key,
              type: "line",
              data: dotList,
              color:this.lineColor[key],
              xAxisIndex: 0,
            });
            this.option5.xAxis.push({
              type: "category",
              axisPointer: {
                type: "none",
              },
              position: "bottom",
              data: timeList,
              axisLabel: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                // show: false,
              },
            });
          }
        }
        console.log("option5", this.option5);
        this.$nextTick(() => {
          this.echartsFn("#reliang", this.option5);
        });
      });
      // 流量分析（瞬时流量）
      velocityFlowAnalysis(this.queryParams).then((res) => {
        let srcData = res.data; //源数据，对象
        let objKey = this.findLongestListKey(srcData); //拿到列表最长的key
        console.log("瞬时流量最长的key", objKey);
        for (const key in srcData) {
          if (key === objKey) {
            let timeList = srcData[key].map((item) => {
              return item.createTime;
            });
            let dotList = srcData[key].map((item) => {
              return {
                res: item,
                value: `${item.value}`,
              };
            });
            this.option4.series.unshift({
              name: key,
              type: "line",
              data: dotList,
              color:this.lineColor[key],
              xAxisIndex: 0,
            });
            this.option4.xAxis.unshift({
              type: "category",
              data: timeList,
              boundaryGap: false,
              axisLabel: {
                color: "#fff",
                rotate: -30,
                fontSize: 10,
              },
              position: "bottom",
              //y轴线
              axisLine: {
                lineStyle: {
                  color: "#fff",
                },
              },
              axisTick: {
                alignWithLabel: true,
              },
            });
          } else {
            let timeList = srcData[key].map((item) => {
              return item.createTime;
            });
            let dotList = srcData[key].map((item) => {
              return {
                res: item,
                value: `${item.value}`,
              };
            });
            this.option4.series.push({
              name: key,
              type: "line",
              data: dotList,
              color:this.lineColor[key],
              xAxisIndex: 0,
            });
            this.option4.xAxis.push({
              type: "category",
              axisPointer: {
                type: "none",
              },
              position: "bottom",
              data: timeList,
              axisLabel: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                // show: false,
              },
            });
          }
        }
        this.$nextTick(() => {
          this.echartsFn("#liuliang", this.option4);
        });
      });
      // 温度分析（室内温度）
      temperatureAnalysis(this.queryParams).then((res) => {
        let srcData = res.data; //源数据，对象
        console.log("室内温度", srcData);
        let objKey = this.findLongestListKey(srcData); //拿到列表最长的key
        console.log("室内温度最长的key", objKey);
        for (const key in srcData) {
          if (key === objKey) {
            let timeList = srcData[key].map((item) => {
              return item.reportTime;
            });
            let dotList = srcData[key].map((item) => {
              return {
                res: item,
                value: `${item.temperature}`,
              };
            });
            this.option3.series.unshift({
              name: key,
              type: "line",
              data: dotList,
              color:this.lineColor[key],
              xAxisIndex: 0,
            });
            this.option3.xAxis.unshift({
              type: "category",
              data: timeList,
              boundaryGap: false,
              axisLabel: {
                color: "#fff",
                rotate: -30,
                fontSize: 10,
              },
              position: "bottom",
              //y轴线
              axisLine: {
                lineStyle: {
                  color: "#fff",
                },
              },
              axisTick: {
                alignWithLabel: true,
              },
            });
          } else {
            let timeList = srcData[key].map((item) => {
              return item.reportTime;
            });
            let dotList = srcData[key].map((item) => {
              return {
                res: item,
                value: `${item.temperature}`,
              };
            });
            this.option3.series.push({
              name: key,
              type: "line",
              data: dotList,
              color:this.lineColor[key],
              xAxisIndex: 0,
            });
            this.option3.xAxis.push({
              type: "category",
              axisPointer: {
                type: "none",
              },
              position: "bottom",
              data: timeList,
              axisLabel: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                // show: false,
              },
            });
          }
        }
        console.log("室内温度option3", this.option3);
        this.$nextTick(() => {
          this.echartsFn("#wendu", this.option3);
        });
      });

      //供水温度
      waterSupplyTemperatureAnalysis(this.queryParams).then((res) => {
        let srcData = res.data; //源数据，对象
        let objKey = this.findLongestListKey(srcData); //拿到列表最长的key
        console.log("供水温度最长的key", objKey);
        for (const key in srcData) {
          if (key === objKey) {
            let timeList = srcData[key].map((item) => {
              return item.createTime;
            });
            let dotList = srcData[key].map((item) => {
              return {
                res: item,
                value: `${item.value}`,
              };
            });
            this.option6.series.unshift({
              name: key + "℃",
              type: "line",
              data: dotList,
              color:this.lineColor[key],
              xAxisIndex: 0,
            });
            this.option6.xAxis.unshift({
              type: "category",
              data: timeList,
              boundaryGap: false,
              axisLabel: {
                color: "#fff",
                rotate: -30,
                fontSize: 10,
              },
              position: "bottom",
              //y轴线
              axisLine: {
                lineStyle: {
                  color: "#fff",
                },
              },
              axisTick: {
                alignWithLabel: true,
              },
            });
          } else {
            let timeList = srcData[key].map((item) => {
              return item.createTime;
            });
            let dotList = srcData[key].map((item) => {
              return {
                res: item,
                value: `${item.value}`,
              };
            });
            this.option6.series.push({
              name: key + "℃",
              type: "line",
              data: dotList,
              color:this.lineColor[key],
              xAxisIndex: 0,
            });
            this.option6.xAxis.push({
              type: "category",
              axisPointer: {
                type: "none",
              },
              position: "bottom",
              data: timeList,
              axisLabel: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                // show: false,
              },
            });
          }
        }
        console.log("option6", this.option6);
        this.$nextTick(() => {
          this.echartsFn("#gongshui", this.option6);
        });
      });
      //回水温度
      returnWaterTemperatureAnalysis(this.queryParams).then((res) => {
        let srcData = res.data; //源数据，对象
        let objKey = this.findLongestListKey(srcData); //拿到列表最长的key
        console.log("供水温度最长的key", objKey);
        for (const key in srcData) {
          if (key === objKey) {
            let timeList = srcData[key].map((item) => {
              return item.createTime;
            });
            let dotList = srcData[key].map((item) => {
              return {
                res: item,
                value: `${item.value}`,
              };
            });
            this.option7.series.unshift({
              name: key + "℃",
              type: "line",
              data: dotList,
              color:this.lineColor[key],
              xAxisIndex: 0,
            });
            this.option7.xAxis.unshift({
              type: "category",
              data: timeList,
              boundaryGap: false,
              axisLabel: {
                color: "#fff",
                rotate: -30,
                fontSize: 10,
              },
              position: "bottom",
              //y轴线
              axisLine: {
                lineStyle: {
                  color: "#fff",
                },
              },
              axisTick: {
                alignWithLabel: true,
              },
            });
          } else {
            let timeList = srcData[key].map((item) => {
              return item.createTime;
            });
            let dotList = srcData[key].map((item) => {
              return {
                res: item,
                value: `${item.value}`,
              };
            });
            this.option7.series.push({
              name: key + "℃",
              type: "line",
              data: dotList,
              color:this.lineColor[key],
              xAxisIndex: 0,
            });
            this.option7.xAxis.push({
              type: "category",
              axisPointer: {
                type: "none",
              },
              position: "bottom",
              data: timeList,
              axisLabel: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                // show: false,
              },
            });
          }
        }
        console.log("option7", this.option7);

        this.$nextTick(() => {
          this.echartsFn("#huishui", this.option7);
        });
      });
      //室外温度
      outTemperatureAnalysis(this.queryParams).then((res) => {
        let srcData = res.data; //源数据，对象
        let objKey = this.findLongestListKey(srcData); //拿到列表最长的key
        console.log("供水温度最长的key", objKey);
        for (const key in srcData) {
          if (key === objKey) {
            let timeList = srcData[key].map((item) => {
              return item.reportTime;
            });
            let dotList = srcData[key].map((item) => {
              return {
                res: item,
                value: `${item.temperature}`,
              };
            });
            this.option8.series.unshift({
              name: key + "℃",
              type: "line",
              data: dotList,
              color:this.lineColor[key],
              xAxisIndex: 0,
            });
            this.option8.xAxis.unshift({
              type: "category",
              data: timeList,
              boundaryGap: false,
              axisLabel: {
                color: "#fff",
                rotate: -30,
                fontSize: 10,
              },
              position: "bottom",
              axisLine: {
                lineStyle: {
                  color: "#fff",
                },
              },
              axisTick: {
                alignWithLabel: true,
              },
            });
          } else {
            let timeList = srcData[key].map((item) => {
              return item.reportTime;
            });
            let dotList = srcData[key].map((item) => {
              return {
                res: item,
                value: `${item.temperature}`,
              };
            });
            this.option8.series.push({
              name: key + "℃",
              type: "line",
              data: dotList,
              color:this.lineColor[key],
              xAxisIndex: 0,
            });
            this.option8.xAxis.push({
              type: "category",
              axisPointer: {
                type: "none",
              },
              position: "bottom",
              data: timeList,
              axisLabel: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                // show: false,
              },
            });
          }
        }
        console.log("option7", this.option8);
        this.$nextTick(() => {
          this.echartsFn("#shiwai", this.option8);
        });
      });
    },
    //选择日期
    dateChange(dateArr) {
      this.queryParams.startTime = dateArr[0];
      this.queryParams.endTime = dateArr[1];
    },
    //选择小区/楼栋/单元/住户
    cascaderChange(e) {
      console.log(e);
      if (e.length > 0) {
        let num = e[0].length;
        let ids = [];
        for (let i = 0; i < e.length; i++) {
          let index = e[i].length - 1;
          ids.push(e[i][index]);
          if (e[i].length != num) {
            this.$message({
              showClose: true,
              message: "请选择同级选项",
              type: "warning",
            });
            this.selectData = [];
            return;
          }
        }
        if (ids.length > 0) {
          this.queryParams.type = this.selectData[0].length - 1;
          this.queryParams.ids = ids;
          this.xAxis = [];
        }
      }
    },
    lazyLoadFun(node, resolve) {
      console.log(this.cascaderOptions);
      const { level, value } = node;
      if (level == 1) {
        listBuildSelect({ plotId: value }).then((res) => {
          resolve(res.rows);
        });
      } else if (level == 2) {
        listBuildUnitSelect({ buildId: value }).then((res) => {
          resolve(res.rows);
        });
      } else if (level == 3) {
        listHouseholdSelect({ unit: value }).then((res) => {
          res.rows.map((item) => {
            item.leaf = true;
          });
          resolve(res.rows);
        });
      } else {
        resolve([]);
      }
    },
    // async init() {
    //   try {
    //     const { ring, line, bar1, bar2, bar3 } = await dataanalyze({});
    //     this.$nextTick(() => {
    //       this.option1.series[0].data = ring;
    //       this.echartsFn("#guzhang", this.option1);

    //       this.option2.series[0].data = line.power;
    //       this.option2.series[1].data = line.temperature;
    //       this.option2.series[2].data = line.flow;
    //       this.echartsFn("#shuju", this.option2);

    //       this.option3.xAxis.data = bar1.x;
    //       this.option3.series[0].data = bar1.data;
    //       this.echartsFn("#wendu", this.option3);

    //       this.option4.xAxis.data = bar2.x;
    //       this.option4.series[0].data = bar2.data;
    //       this.echartsFn("#liuliang", this.option4);

    //       this.option5.xAxis.data = bar3.x;
    //       this.option5.series[0].data = bar3.data;
    //       this.echartsFn("#reliang", this.option5);
    //     });
    //   } catch (e) {
    //     console.log(e);
    //     //TODO handle the exception
    //   }
    // },
    // 随机生成颜色
    getRandomColor() {
      var letters = "0123456789ABCDEF";
      var color = "#";
      for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    },
    //清空折线图配置
    clearOptions() {
      //折线图初始配置
      let initObj = {
        color: colors,
        xAxis: [],
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#fff",
          },
          //y轴线
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
        },
        tooltip: {
          trigger: "axis",
        },
        series: [],
      };
      this.option3 = JSON.parse(JSON.stringify(initObj)); //室内温度
      this.option4 = JSON.parse(JSON.stringify(initObj)); //瞬时流量
      this.option5 = JSON.parse(JSON.stringify(initObj)); //瞬时热量
      this.option6 = JSON.parse(JSON.stringify(initObj)); //供水温度
      this.option7 = JSON.parse(JSON.stringify(initObj)); //回水温度
      this.option8 = JSON.parse(JSON.stringify(initObj)); //室外温度
    },
    //返回对象中value为列表时，最长的key
    findLongestListKey(data) {
      let maxLength = 0;
      let longestKey = null;
      for (const key in data) {
        if (data.hasOwnProperty(key)) {
          const currentList = data[key];
          const currentLength = currentList.length;
          if (currentLength > maxLength) {
            maxLength = currentLength;
            longestKey = key;
          }
        }
      }
      return longestKey;
    },
    //折线取色
    getLineColor(v) {
      let colors = [
        "#91cc75",
        "#fac858",
        "#ee6666",
        "#73c0de",
        "#3ba272",
        "#fc8452",
        "#9a60b4",
        "#ea7ccc",
      ];
      let index =  v % colors.length
      return colors[index]
    },
  },
};
</script>

<style lang="scss" scoped>
.info_box {
  width: 100%;

  .title {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    color: #fff;

    .tag {
      margin-right: 5px;
      height: 20px;
      width: 5px;
      background: linear-gradient(180deg, #00bbf6 0%, #0075d1 100%);
    }

    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
  }

  .top {
    display: flex;
    justify-content: space-between;

    .biao1 {
      width: 50%;
      height: 340px;
      background-color: #444f64;
      position: relative;
    }

    .biao2 {
      width: 49%;
      height: 340px;
      background-color: #444f64;
      position: relative;
    }
  }

  .bottom {
    margin-top: 10px;
    // display: flex;
    // justify-content: space-between;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px 20px;
    .biao3 {
      // width: 38%;
      height: 300px;
      background-color: #444f64;
      position: relative;
    }

    .biao4 {
      // width: 30%;
      height: 300px;
      background-color: #444f64;
      position: relative;
    }

    .biao5 {
      // width: 30%;
      height: 300px;
      background-color: #444f64;
      position: relative;
    }
  }
}
// .totalDataTable {
//   ::v-deep .el-table {
//     margin-top: 0;
//     border: 0;
//   }
//   ::v-deep .el-table__body-wrapper {
//     height: 320px !important;
//     background-color: #444f64;
//   }
// }
</style>
